import React,{ useState } from 'react'
import { Card, Breadcrumb, Form, Space,Button, Input,  Radio,
  Upload,Modal, message  } from 'antd'
import { PlusOutlined} from '@ant-design/icons'
import { Link } from 'react-router-dom'
import styles from "./index.module.scss";
import Channel from '@/components/Channel'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { addArticle,getArticleInfo,editArticle } from '@/store/actions' 
import { useDispatch } from 'react-redux';
import { useHistory,useParams } from 'react-router-dom';
import { useEffect } from 'react';
const Publish = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  ////////////////////////////////封面图的逻辑
  const [isShow,setIsShow] = useState(false)
  const [imgUrl,setImgUrl] = useState('')
  const title = '预览图片'
  const [type,setType] = useState(1)
  const [fileList,setfileList] = useState([])
  const onTypeChange = val=>{
    setType(val)  
    setfileList([])
  }
  // 文件切换会触发
  const onUploadChange = ({fileList})=>{
    setfileList(fileList)
  }
  // 点击预览
  const onPreview = ({thumbUrl})=>{
    setIsShow(true)
    setImgUrl(thumbUrl)
  }
  const onCancel = ()=>{
    setIsShow(false)
    setImgUrl('')
  }
  ////////////////////////////////编辑回显数据
  // 注意：不建议在useEffect的函数上面写async
  const params = useParams()
  const [form] = Form.useForm()  // 获取到表单组件实例
  useEffect(()=>{
    const setFormData =async ()=>{
      let {  title, cover, content, channel_id } =  await dispatch(getArticleInfo(params.id))
      form.setFieldsValue({ title,content, channel_id,cover:cover.type})
      setType(cover.type)  
      // [{url:"xxx"},{url:"xxx"}]
      setfileList(cover.images.map(item=>({ url:item })))
    }
    if(params.id){
      setFormData() 
    }else{
      // 防止 编辑再跳转到添加，有数据遗留！
      form.resetFields()
      setType(1)  
      setfileList([])
    }

  },[params,dispatch,form])

  ////////////////////////////////提交
  // 封面校验函数
  const coverValidator = (_,value)=>{
    if(value !== fileList.length) return Promise.reject(new Error('请上传图片'))
    return Promise.resolve()
  }
  // 提交逻辑
  const onFinish =async (values,darft=false)=>{
    const data = {
      ...values,
      cover:{
        type:values.cover,
        images:fileList.map(item=>item?.response?.data?.url || item.url)
      }
    }
    if(params.id){
      await dispatch(editArticle({
        ...data,
        id:params.id
      }),darft)
      message.success('修改成功')
    }else{
      await dispatch(addArticle(data),darft)
      message.success('添加成功')
    }
    history.push("/article");
  }
  // 存入草稿 【添加、修改都有存入草稿的需求】
  const saveDarft =async ()=>{
     try {
      // 表单校验 validateFields 校验通过，返回表单数据； 校验失败抛出Promise.reject状态
      const values = await form.validateFields()
      onFinish(values,true)
      // 提交功能
     } catch (error) {
       console.log(error)
     }
  }

  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <Link to="/article">内容管理</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{ params.id ? '编辑文章':'发表文章' }</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form onFinish={onFinish} form={ form } labelCol={{ span: 4 }}>
          <Form.Item
            label="文章标题："
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            {/* 将 name对应字段数据， 赋给 内部的组件的value属性，并且还会捕捉到 内部组件的onChange事件 */}
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="所属频道："
            name="channel_id"
            rules={[{ required: true, message: "请选择所属频道" }]}
          >
            <Channel width={400} />
          </Form.Item>
          <Form.Item
            label="文章封面："
          >
            {/* 一个带name的FormItem只能有一个元素 */}
            <Form.Item  name="cover" rules={[{ validator:coverValidator }]} initialValue={type}  style={{ marginBottom: 0 }}>
              {/* 单选按钮组 */}
              <Radio.Group value={type} onChange={ e=>onTypeChange(e.target.value) }>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {/* 上传组件 */}
            { type > 0 ?
              (
                <div style={{marginTop:"16px"}}>
                  <Upload
                    name="image"
                    listType="picture-card"
                    action="http://geek.itheima.net/v1_0/upload"
                    onPreview={ onPreview }
                    fileList={fileList}
                    onChange={onUploadChange}
                  >
                    { fileList.length < type ?
                      <>
                        <PlusOutlined />
                        <div style={{ marginTop: 8 }}>Upload</div>
                      </>:null
                    }
                  </Upload>
                </div>
              )
              :
              null
            }
            {/* 预览图片的弹框 */}
            <Modal
              visible={isShow}
              title={title}
              footer={null}
              onCancel={onCancel}
            >
              <img alt="example" style={{ width: '100%' }} src={imgUrl} />
            </Modal>
          </Form.Item>
          <Form.Item 
            label="文章正文" 
            name="content" 
            initialValue={''}
            rules={[{ required: true, message: "请输入文章内容" }]}
          >
            {/* 文本编辑器插件 */}
            {/* ReactQuill 有value属性表示编辑器显得内容； onChange事件将编辑器最新的数据返回出去 */}
            {/* Input 组件 value属性表示输入框的内容； onChange事件将输入框数据传出去 */}
            {/* <Input  />   因为 Form.Item 会自动去捕捉 内部 组件元素的 value属性， 监听onChange事件 */}
            <ReactQuill  />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType='submit'>{ params.id ? '编辑文章':'发表文章' }</Button>
              <Button onClick={saveDarft}>存入草稿</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default Publish